@import "../common/theme.less";
@import "../button.less";
//s2主题用色
@color-theme:#943bea;
@color-theme-light: rgba(148, 59, 234, 0.1);
@theme-linear:linear-gradient(to left, #9368E9 0%, #943bea 100%);
.theme-s2{
  a{
    color:@color-theme;
  }
  .header_control{
    color:@color-fff;
  }
  .stackmenu-cell{
    background:  url("@{img}leftbg.jpg")  no-repeat center;
    background-size: cover;
    box-shadow: 5px 5px 5px rgb(0 0 0 / 10%), -5px 0 5px rgb(0 0 0 / 10%);
    position: relative;
    .stakmenu-bg{
      background: transparent;
    }
    &:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background:rgb(147 66 233 / 80%);
      height: 100%;
    }
    .fa-classic, .fa-light, .fa-regular, .fa-solid, .fa-thin, .fal, .far, .fas, .fat{
      color: @color-fff;
    }
  }
  .account-menu {
    background: @theme-linear;
    box-shadow: -5px 2px 5px @color-theme, 5px 5px 10px #000;
  }
  .header_info {
    a {
      i{
        color: #fff !important;
      }
      color: rgba(255,255,255,0.8) !important;
      &:hover {
        background: @color-theme-light !important;
        box-shadow: -5px 2px 5px #333, 5px 5px 10px #000;
        color: rgba(255, 255, 255, 1);
        i{
          color: #fff !important;
        }
      }
    }
  }
  .nav-active{
    background: @theme-linear !important;
    box-shadow: -5px 2px 5px rgba(0,0,0,.2), 5px 5px 10px rgba(0,0,0,.1);
    color: rgba(255, 255, 255, 1);
  }
  .header_nav {
    .header_nav_inner {
      .nav-item {
        &:hover {
          color: @color-theme !important;
          border: 1px solid @color-theme !important;
        }
        .nav-close {
          color: @color-theme;
        }
        .nav-title {
          color: @color-theme;
        }
        &.selected {
          background:@color-theme;
          .nav-title {
            color: @color-fff !important;
          }
          &:hover {
            color: @color-fff !important;
            border: 1px solid @color-theme !important;
          }
          .nav-close {
            color: @color-fff !important;
          }

        }
      }
    }
  }
  .record-view{
    background:@color-theme;
  }
  .operation-icons a{
    background:@color-theme;
  }
  .stackmenu{
    .color-ff;
    .branch{
      padding: @size1 * 12 0 @size1 * 12 @size1 * 16;
      border-left:0;
      &:hover {
        border-left-color: inherit;
        .menu-label{
          color: rgba(255,255,255,.8);
        }
      }

    }
    .leaf{
      padding: @size1 * 12 0 @size1 * 12 @size1 * 16;
      border-left:0;
      &:hover{
        .menu-label{
          color: rgba(255,255,255,.8);
        }
      }
    }
    .leaf-selected {
      background:rgba(0,0,0,.2);
      border-left-color: inherit;
      font-weight: bold;
      box-shadow: inherit;
      transition: all 0.2s ease-in-out;
      color: rgba(255,255,255,.8);
      &:hover{
        color: rgba(255,255,255,.8);
      }
    }
    .branch-selected{
      background:@color-light;
      position: relative;
      //box-shadow:-5px 2px 5px #33333357, 5px 5px 10px #00000036;
      color: rgba(255,255,255,.8);
      &:hover {
        color: rgba(255,255,255,.8);
      }

    }
  }
  .background-logo{
    background:@theme-linear;
    .color-ff;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 10%);
  }
  .background-header{
    background: @color-fff;
    .nav-list {
      .color-33;
      display: flex;
      /* float: left; */
      grid-row-gap: @size1 * 20;
      align-items: center;
      grid-auto-flow: column;
      li{
        text-align: center;
        font-size:@size1 * 18;
        cursor: pointer;
        &:hover{
          background: @theme-linear !important;
          box-shadow: -1px 2px 10px 0 rgba(0, 0, 0, 0.4);
          color: rgba(255, 255, 255, 1);
          transition: all .2s linear;
        }
      }

    }
  }

  .header_info li{
    .color-33
  }
  .header_control li{
    .color-33
  }

  .calendar{
    .chosen-date{
      background: @theme-linear !important;
    }
    .footer{
      span{
        &:hover{
          background: @theme-linear;
        }
      }
    }
  }
  .cover-container{
    .cover-header{
      background:@theme-linear;
    }
  }
  .btn:hover{
    border: 1px solid @color-theme-light;
    color:@color-theme;
    background-color:@color-theme-light;
  }
  .btn-primary{
    background:@theme-linear;
    border: 1px solid @color-theme;
    &:hover{
      color: @color-fff;
      background:@color-theme;
    }
  }
  .btn-waring {
    background-color:@color-waring;
    border-color: @color-waring;
    color: #fff;
    &:hover {
      background-color:@color-waring-bg1;
      border-color:@color-waring-bg1;
      color: #fff;
    }
  }
  .paginationControl{
    .control {
      .pageIndexBtn {
        &.pageIndexBtnCurrent {
          background-color:@color-theme;
          opacity: 1;
        }
      }
    }
    .btn-info:hover{
      background-color: @color-theme;
      color: @color-fff;
    }

    .redirectPageBtn{
      background-color:@color-theme;
      color: #fff;
      &:hover{
        color: @color-fff;
      }
    }
    .totalPageDis,.totalAmountDis{
      color: @color-theme;
    }
  }
  [data-bg=tab]{
    border:1px solid @color-eb;
    .tab-active{
      &:before{
        background:@theme-linear;
      }
    }
  }
  .calendar-month,.calendar-content{
    background: @theme-linear !important;
  }
  [data-type=primary]{
    .type-normal(@color-theme);
    &:hover{
      .default-hover(@color-theme)
    }
  }
  [data-type=primary][plain]{
    .type-color(@color-theme,@color-theme-light,@color-theme,4px);
    &:hover{
      .type-hover(@color-fff,@color-theme,@color-theme);
    }
  }
  [data-type=primary][normal]{
    .type-color(@color-fff,@theme-linear,@color-theme,4px);
    &:hover{
      .type-hover(@color-fff,@color-theme,@color-theme);
    }
  }
  [data-type=default][plain],[data-type=default][normal]{
    .type-color(@color-theme,@color-fff,@color-theme,4px);
    &:hover{
      .type-hover(@color-theme, @color-theme-light,@color-theme);
    }
  }
  [data-type=default][plain][round],[data-type=default][normal][round]{
    .type-color(@color-theme,@color-fff,@colordc,20px);
    &:hover{
      .type-hover(@color-theme, @color-bg,@color-theme);
    }
  }
  .header_nav_wrap{
    .shift-left{
      &:hover{
        background:@theme-linear;
      }
    }
    .shift-right{
      &:hover{
        background:@theme-linear;
      }
    }
  }
  .form-control{
    &:focus{
      border:1px solid @color-theme;
    }
  }

  .shift-left {
    .shift-month{

      .duty-group{
        background:@theme-linear !important;
      }

    }
  }
  .pitchon{
    background:#f5f7fa;
  }
  .pitchon span{
    color: @color-theme !important;
  }
  .tree {
    .branch-selected{
      background-color:@color-theme;
      color: @color-fff ;
      .menu-label{
        color: @color-fff
      }
      &:hover{
        .node-item{
          color: @color-fff ;
        }
      }
      }
    }
    .branch{
      border-left-color: @color-theme;
      &:hover{
        color: @color-theme ;
        border-left-color:@color-theme;

        &.menu-label{
          color: @color-theme;
        }
      }
    }
    .pad{
      .branch{
        background:@color-fa ;
        color: @color-theme ;
        .menu-label {
          color:@color-theme ;
        }
      }
      .branch-selected{
        &:hover{
          .node-item{
            color: @color-theme ;
          }
      }

    }
    .menu-node {
      .actived-node {
        .pad {
          .branch{
            background: @color-fa ;
            color:@color333;
            .menu-label{
              color: @color-theme ;
            }
            &:hover{
              .node-item{
                color: @color-theme;
              }
            }
          }
        }
      }
    }
    .leaf{
      &:hover{
        color: @color-theme;
        border-left-color: @color-theme;
        .menu-label{
          color: @color-theme;
        }

      }
    }
    .msgHolder{
      background:@color-theme !important;
    }
    .actived-node {
      .leaf {
        color: @color-theme;
        .pad{
          .menu-label{
            color: @color-theme;
          }
        }
      }
    }
  }

  input[type="checkbox"]:checked::before {
    background-color: @color-theme;
    border: 1px solid @color-theme;
  }
  input[type="checkbox"].selectAll:checked::before{
    border: 1px solid rgba(255,255,255,0.5);
  }
  .switch-wrapper .switch-actived{
    border-color: @color-theme;
    background-color: @color-theme;
  }
  .active{
    color:@color-theme !important;
  }
  .radio-wrapper {
    .radio-item {
      .radio-input{
        &.checked {
          background:@color-theme;
          border: 1px solid @color-theme;
        }
      }
    }
  }
  .fa-remove {
    -webkit-text-stroke: 0 @color-fff
  }

  .fa-window-maximize {
    -webkit-text-stroke:  0 @color-fff;
  }
  .fa-window-restore {

    -webkit-text-stroke: 0 @color-fff;
  }

  .skin.content {
    background: #fff;
    overflow-y: auto;
    height: 100%;

    &::-webkit-scrollbar {
      width:@size1 * 12;
      height: @size1 * 12;
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
      background: @theme-linear;
      border-radius: 1px;
      display: none;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 1px;
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
      background: @theme-linear;
    }

    &::-webkit-scrollbar-button {
      background-color: #ffffff;
    }

    &::-webkit-scrollbar-corner {
      background: #ffffff;
    }

    &::-webkit-scrollbar-track-piece {
      background-color: #ffffff;
    }
  }
  .staContainer {
    .staTitle{
      background:@theme-linear !important;
    }
  }
  .leftmenu{
    background:@theme-linear !important;
  }
  .msgHolder{
    background:@theme-linear !important;
  }
  .dropdown-wrapper{
    input[type="text"]{
      &:hover{
        border-color:@color-theme;
      }
    }
    ul{
      li{
        &.selected{
          background: @color-theme;
          color: #fff;
        }
        &:hover{
          background: @color-theme;
          .label-txt{
            color: white;
          }
        }
      }
    }
  }
  .show-message{
    background:@color-theme;
    padding: @size1 * 10 @size1 * 20;
    border: 1px solid @colorf5;
    border-radius: 5px;
    color: @color-fff;
    position: relative;
    font-size:@size1 * 16;
    line-height: @size1 * 22;
    pointer-events: none;
    max-width: 100%;
    .box-shadow;
    &:after{
      content: '';
      width:0;
      height:0;
      border-left:@size1 * 10 solid transparent;
      border-right:@size1 * 10 solid transparent;
      border-top:@size1 * 10 solid @color-theme;
      //transform:rotate(45deg);
      position: absolute;
      bottom: -@size1 * 8;
      z-index: 999;
      left: @size1 * 3;
    }
  }

  .checkbox-wrapper{
    .checkbox-item{
      .checkbox-input
      {
        &.checked {
          background: @color-theme;
          border: 1px solid @color-theme;
        }
      }
    }
  }
  .palette-block {
    .palette-item{
      &:hover{
        background: @color-theme;
      }
    }
  }
  .data-block-wrapper{
    .block-control{
      background: @color-theme;
    }
    .editable{
      &:hover{
        border: 1px dashed @color-theme;
      }
    }
    &.actived{
      outline: 2px solid @color-theme;
    }
  }
  .data-block-ctrl{
    .form-btn{
      background:@theme-linear;
      border: 1px solid @color-theme;
      &:hover{
        background: @color-theme;
      }
    }
  }
  .links-block{
    label{
      &:hover{
        color: @color-theme;
      }
    }
  }
  .card-left{
    background: @color-theme;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: @size1 * 5;
    //-webkit-box@color-theme-shadow:  0 0 5px rgba(0, 0, 0, 0.2);
    background:rgb(38 35 38 / 24%);
  }
  .btn-info.disabled.focus, .btn-info.disabled:focus, .btn-info.disabled:hover, .btn-info[disabled].focus, .btn-info[disabled]:focus, .btn-info[disabled]:hover, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info:hover{
    background-color:@color-theme;
    border-color:@color-theme-light;
    color: @color-fff;
  }
  .floatmsg-container>.header {
    background:@theme-linear;
  }

  .tabHolder{
    .tab-nav-active {
      color: @color-theme;
      &:before{

        background: @color-theme;
      }
    }
    .tab-nav-item{
      &:hover{
        color: @color-theme;
      }

    }
  }
  [border-left]{
    &:after{
      background: @color-theme;

    }
  }
  [border-right]{
    &:after{
      background: @color-theme;

    }
  }
  .res-arrow{
    color: @color-fff;
    border-top: 1px solid @color-theme;
    &:hover{
      background: @color-theme-light;
      box-shadow: 0 0 @size1 * 10 @color-theme-light;
      transition: background .3s;
    }
  }
  ::-webkit-scrollbar-track {
    //-webkit-box-shadow:  0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background:transparent;
  }
  .background-f3{
    background: @colorf5;
    input[type="checkbox"]:checked + .checkmark:before {
      content: "";
      position: absolute;
      left:0 ;
      top: 0;
      width: 100%;
      height: 100%;
      background: @color-theme;
      color: @color-fff;

    }
    input[type="checkbox"]:checked  {
      &~.check-title {
        color: @color-fff;
      }
      &~.check-msg{
        color: @color-fff;
      }

    }
  }
  .ctrl-btn{
    cursor: pointer;
    width:@size1 * 22;
    height:@size1 * 8;
    background:@color-theme;
    display: block;
    margin:0 0.625rem 0 0;
  }
  .ctrl-ban-active{
    background:@color-theme-light;
  }
  //css样式规范相关样式
  .guides-default{
    display: block;
    padding-left:@size1 * 20;
    &:hover{
      color: @color-theme;
    }
  }
  .guides-active{
    background: @theme-linear;
    transition: all 0.1s linear;
    position: relative;
    color: @color-fff;
    &:hover{
      color: @color-fff;
    }
  }
}